<template>
  <div class="base-table-layout">
    <!-- 标题区域 -->
    <div class="page-header">
      <h2>{{ title }}</h2>
    </div>

    <!-- 功能区域 -->
    <div class="function-area">
      <div class="search-area">
        <slot name="search"></slot>
      </div>
      <div class="operation-area">
        <slot name="operation"></slot>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="content-area">
      <slot name="table"></slot>

      <!-- 分页 -->
      <div class="pagination" v-if="showPagination">
        <el-pagination
          v-show="total > 0"
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 弹窗区域 -->
    <slot name="dialogs"></slot>
  </div>
</template>

<script>
export default {
  name: 'BaseTableLayout',
  props: {
    title: {
      type: String,
      required: true
    },
    showPagination: {
      type: Boolean,
      default: true
    },
    total: {
      type: Number,
      default: 0
    },
    currentPage: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 10
    },
    pageSizes: {
      type: Array,
      default: () => [10, 20, 50, 100]
    }
  },
  methods: {
    handleSizeChange(val) {
      this.$emit('update:pageSize', val)
      this.$emit('size-change', val)
    },
    handleCurrentChange(val) {
      this.$emit('update:currentPage', val)
      this.$emit('current-change', val)
    }
  }
}
</script>

<style lang="scss" scoped>
.base-table-layout {
  height: 100%;
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  .page-header {
    margin-bottom: 20px;
    
    h2 {
      margin: 0;
      font-size: 20px;
      font-weight: 500;
      color: #303133;
    }
  }

  .function-area {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;

    .search-area {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;

      .filter-item {
        margin-right: 10px;
      }
    }

    .operation-area {
      display: flex;
      gap: 10px;
    }
  }

  .content-area {
    .el-table {
      margin-bottom: 20px;
    }
  }

  /* 在全局样式文件中 */
  :global(.el-table td),
  :global(.el-table th) {
    padding: 8px;
    text-align: center !important;
    vertical-align: middle;
  }

  .pagination {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
  }
}
</style> 